<template>
  <div>
    <div class="per-title">
      <h3>权限管理</h3>
    </div>
    <table class="per-tabs" cellspacing="0">
      <thead>
      <tr>
        <th style="">序号</th>
        <th style="">权限名称</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="i in permissions" :key="i.id+'id'" v-bind:class="i.id%2==1?'even':'odd'">
        <td>{{ i.id }}</td>
        <td style="text-align: left">{{ i.manage }}</td>
      </tr>
      </tbody>
    </table>
  </div>

</template>

<script>
export default {
  name: "PermissionControl",
  data() {
    return {
      permissions: [{id: "1", manage: "菜单管理"}, {id: "2", manage: "权限管理"}, {id: "3", manage: "创建子账号"}, {
        id: "4",
        manage: "人员信息修改"
      }, {id: "5", manage: "人员信息删除"}]
    }
  }
}
</script>

<style scoped>


.per-title {
  line-height: 60px;
}

.per-tabs {
  margin: 0 auto;
  width: 100%;

}

thead > tr > th:first-child {
  text-align: center;
  border-radius: 10px 0px 0px 0px;
}

thead > tr > th:last-child {
  text-align: left;
  border-radius: 0px 10px 0px 0px;
}

th {
  height: 50px;
  background-color: rgb(45, 109, 167);
  color: white;
}

.even td {
  text-align: center;
  height: 50px;
  background-color: rgb(234, 240, 246);
  border-bottom: 1px solid white;
}

.odd td {
  text-align: center;
  height: 50px;
  background-color: white;
}
</style>